<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { usePublicHooks } from './hooks'

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    higherDeptOptions: [],
    ParentId: 0,
    Name: "",
    Code: "",
    Sort: null,
    Status: 1,
    Value: "",
    Note: ""
  })
});

const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="70px">
    <el-row :gutter="30">
      <re-col>
        <el-form-item label="上级菜单">
          <el-cascader class="w-full" v-model="newFormInline.ParentId" :options="newFormInline.higherDeptOptions"
            :props="{
    value: 'Id',
    label: 'Name',
    children: 'Children',
    emitPath: false,
    checkStrictly: true
  }" clearable filterable placeholder="请选择上级菜单">
          </el-cascader>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="名称" prop="Name">
          <el-input v-model="newFormInline.Name" clearable placeholder="请输入名称" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="编码" prop="Code">
          <el-input v-model="newFormInline.Code" clearable placeholder="请输入编码" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="值" prop="Value">
          <el-input v-model="newFormInline.Value" clearable placeholder="请输入值" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="说明" prop="Note">
          <el-input v-model="newFormInline.Note" clearable placeholder="请输入说明" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="排序" prop="Sort">
          <el-input-number v-model="newFormInline.Sort" :min="0" :max="9999" controls-position="right" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="状态" prop="Status">
          <el-switch v-model="newFormInline.Status" inline-prompt :active-value="1" :inactive-value="0" active-text="启用"
            inactive-text="停用" :style="switchStyle" />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.el-radio {
  margin-right: 16px;
}
</style>
